{% extends 'base.html' %} {% block content %}


<div class="row row-title">
    <div class="card card-title">
        <div class="row row-blue">
            <h1 id="Text"><i class="fas fa-paw"></i> &nbsp; Cat Dog Image Classifier </h1>
        </div>
        <div class="row  text-center row-text">
            <p>Let me predict if it's a Cat or Dog on your Image</p>
        </div>
        <div class="row row-cards">
            <div class="col-xs-6 col-sm-6 col-md-6 text-center">
                <img src="{{url_for('static', filename='img/cat.jpg')}}" class="img-responsive img-pet"/>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 text-center">
                <img src="{{url_for('static', filename='img/dog.jpg')}}" class="img-responsive img-pet"/>
            </div>
        </div>
        <div class="row plain-element">
            <form id="upload-file" method="POST" enctype="multipart/form-data">
                <div class="row row-form">
                    <div class="file-field input-field">
                        <div class="btn btn-file">
                            <span>File</span>
                            <input type="file" name="file" multiple>
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text" placeholder="Upload your .jpg image file">
                        </div>
                    </div>
                </div>
                <br>
                <div class="row row-form">
                    <button id="upload-file-btn" class="btn btn-submit" type="button">Predict</button>
                </div>
            </form>
        </div>
        <br>
        <br>
        <div class="row row-form">
            <div class="card card-prediction" id="cat">
                <div class="card-image">
                    <img src="/static/img/cat.png">

                </div>
                <div class="card-content">
                    <h5>It's a Cat</h5>
                </div>
            </div>
            <div class="card card-prediction" id="dog">
                <div class="card-image">
                    <img src="/static/img/dog.png">

                </div>
                <div class="card-content">
                    <h5>It's a Dog</h5>
                </div>
            </div>
            <h5 id="error">Only .jpg files allowed</h5>
            <div class="loader"></div>
        </div>
    </div>


</div>
<br>


<br>
<br>


{% endblock %}
